<template>
    <view class="ui-step">
        <view
            :class="'step' + (s == 0 ? ' first' : s == props.steps.length - 1 ? ' last' : '') + (s + 1 < props.curr ? ' active' : s + 1 == props.curr ? ' curr' : '')"
            v-for="(step, s) in props.steps" :key="s">
            <view class="icon">
                <view class="line"></view>
                <template v-if="props.mode == 3">
                    <image class="image" v-if="s + 1 < props.curr" src="@/static/images/step_2.png" mode="scaleToFill"></image>
                    <image class="image" v-else-if="s + 1 == props.curr" src="@/static/images/step_1.png" mode="scaleToFill">
                    </image>
                    <image class="image" v-else src="@/static/images/step_0.png" mode="scaleToFill"></image>
                </template>
                <template v-else-if="props.mode == 2">
                    <image class="image" v-if="s + 1 < props.flow" src="@/static/images/step_2.png" mode="scaleToFill"></image>
                    <image class="image" v-else-if="s + 1 === props.flow && props.status == 3" src="@/static/images/step_2.png"
                        mode="scaleToFill"></image>
                    <image class="image" v-else-if="s + 1 === props.flow && props.status == 1" src="@/static/images/step_1.png"
                        mode="scaleToFill"></image>
                    <image class="image" v-else-if="s + 1 === props.flow && props.status == 2" src="@/static/images/step_3.png"
                        mode="scaleToFill"></image>
                    <image class="image" v-else src="@/static/images/step_0.png" mode="scaleToFill"></image>
                </template>
            </view>
            <text class="text">{{ step }}</text>
        </view>
    </view>
</template>

<script setup>
const props = defineProps({
    steps: Array,
    curr: Number,
    mode: {
        type: Number,
        default: 3
    },
    flow: {
        type: Number,
        default: 1
    },
    status: String
})
</script>

<style lang="scss" scoped>
.ui-step {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;

    .step {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1;

        .icon {
            position: relative;
            z-index: 0;
            flex: 2;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            .image {
                position: relative;
                z-index: 2;
                width: 72rpx;
                height: 72rpx;
                background-color: #ffffff;
                border-radius: 50%;
                overflow: hidden;
            }

            .line {
                position: absolute;
                z-index: 1;
                left: 0;
                right: 0;
                height: 2rpx;
                top: 50%;
                transform: translate(0%, -50%);
                background-color: #dddfe6;
            }
        }

        .text {
            margin-top: 20rpx;
            box-sizing: border-box;
            flex: 1;
            flex-shrink: 0;
            font-size: 28rpx;
            color: gray;
        }
    }

    .step.curr,
    .step.active {
        .text {
            color: $uni-color-primary;
        }

        .icon {
            .line {
                background: $uni-color-primary;
            }
        }
    }

    .step.first {
        .line {
            transform: translate(50%, -50%);
        }
    }

    .step.last {
        .line {
            transform: translate(-50%, -50%);
        }
    }
}
</style>
